<template>
  <div id="monitorStatics">
    <div class="dataAllBorder01" >
      <div class="dataAllBorder02">
        <div class="analysis">监测设备数量：</div>
        <ul  class="data_show_box">
          <li class="data_cage" style="background-image: none;">0</li>
          <li class="data_cage" style="background-image: none;">0</li>
          <li class="data_cage" style="background-image: none;">,</li>
          <li class="data_cage " style="background-image: none;">1</li>
          <li class="data_cage" style="background-image: none;">5</li>
          <li class="data_cage" style="background-image: none;">2</li>
        </ul>
        <div class="depart_number_box">
          <ul class="depart_number_cage">
            <li class="depart_name">水质监测类：</li>
            <li class="depart_number">3,238</li>
          </ul>
          <ul class="depart_number_cage">
            <li class="depart_name">流量监测类：</li>
            <li class="depart_number">1,630</li>
          </ul>
          <ul class="depart_number_cage" style="margin-bottom: 0px;">
            <li class="depart_name">水位测量类：</li>
            <li class="depart_number">4,251</li>
          </ul>
          <ul class="depart_number_cage" style="margin-bottom: 0px;">
            <li class="depart_name">车辆监测类：</li>
            <li class="depart_number">24</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    };
  },
  components: {},
  mounted() {
  },
  methods: {
  }
};
</script>

<style lang="scss">
#monitorStatics {
  padding: 0.2rem;
  height: 5.125rem;
  min-width: 3.75rem;
  border-radius: 0.0625rem;
  /*右侧*/
  .analysis{
    width: 100%;
    height: 10%;
    padding-top: 2%;
    text-align: left;
    text-indent: 0.7em;
    font-size: 16px;
    font-weight: bold;
    color: white;
  }
  .data_show_box{
    height: 50%;
    width: 76%;
    margin: auto;
    padding-top: 15%;
    text-decoration: none;
  }
  .data_cage{
    display: block;
    background-image: url("../assets/img/data_bg.png");
    height: 100%;
    width: 16%;
    float: left;
    margin-left: 1px;
    color: #ff0e29;
    text-align: center;
    font-size: 36px;
    font-family: data_Number;
    background-repeat: no-repeat;
    background-size: 100%;
  }
  .funct_number{
    color: black;
  }
  .depart_number_box{
    height: 28%;
  }
  .depart_number_cage{
    width: 50%;
    float: left;
    height: 24px;
    padding-left: 4%;
    margin-top: 1%;
    margin-bottom: 8px;
  }
  .depart_number_cage li{
    display:block;
    float: left;
    line-height: 24px
  }
  .depart_name{
    font-size: 14px;
    color: white;
    cursor: pointer;
  }
  .depart_number{
    font-family: data_Number;
    font-size: 24px;
    color: #10a4db;
  }
}
</style>